<template>
  <div class="page selectMeetingRoom">
    <van-nav-bar left-arrow @click-left="onClickBack" class="my-nav-bar" />
    <van-image :src="require('@/assets/images/meetingOverview/chooseMeeting.png')" alt="" width="100%"
      style="display: block;margin-top: -34px" />
    <div class="content">
      <div class="chooseRoom">
        <span class="chooseRoom-title">选择会议室</span>
        <div class="chooseRoom-filter">
          <van-image :src="require('@/assets/images/meetingOverview/filter.png')" alt="" width="20px"
            style="display: inline-block;" />
          <span>筛选</span>
        </div>
      </div>
      <div class="card chooseDate">
        <div class="chooseDate-text">
          <van-image :src="require('@/assets/images/meetingOverview/time.png')" alt="" width="15px" />
          <span>{{ formData.time }}</span>
        </div>
        <van-icon name="arrow" @click="showDate = true" />
        <van-popup v-model="showDate" position="top">
          <van-datetime-picker type="date" title="选择年月日" v-model="currentDate" @cancel="showDate = false"
            @confirm="onConfirm" />
        </van-popup>

      </div>
    </div>
    <div class="card-container">
      <div class="card container" v-for="item in roomList" :key="item.id">
        <div class="card-title">
          <div class="card-title-text">{{ item.roomName }}</div>
          <div class="card-person">
            <van-image :src="require('@/assets/images/meetingOverview/person.png')" alt="" width="18px" />
            <span>144</span>
          </div>
        </div>
        <div class="card-things">
          <span class="things" v-for="item2 in item.things" :key="item2">{{ item2 }}</span>
        </div>
        <div class="card-place">
          <van-image :src="require('@/assets/images/meetingOverview/place.png')" alt="" width="15px" />
          <span class="place">{{ item.place }}</span>
        </div>
        <div class="card-time">
          <div v-for="item2 in item.time" :key="item2.id">
            <div class="roomTime" :style="{ backgroundColor: item2.status == 0 ? '#ECF3FE' :' #2C70F4'}"></div>
            <div class="roomTime2" :style="{ color: item2.status == 0 ? '#ACBCF9' : '#2C70F4' }">{{ item2.time
              }}</div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'meetingOverview',
  data() {
    return {
      showDate: false,
      minDate: new Date(),
      showPicker: false,
      showPickerEndDate: false,
      formData: {
        time: '2025-04-24 周四',
      },
      currentDate: new Date(),
      roomList: [
        {
          place: '供水业大厦2楼西',
          id: 1,
          roomName: '2楼西会议室',
          things: ['电视机', '话筒', '电子横幅屏', 'LED显示屏'],
          time: Array.from({ length: 16 }, (_, i) => ({ id: i + 1, time: i + 7, status: 0 }))
        },
        {
          id: 2,
          roomName: '4楼西会议室',
          things: ['电视机', '话筒', '电子横幅屏', 'LED显示屏'],
          place: '供水业大厦2楼西', 
          time: Array.from({ length :16 }, (_, i) => ({  id: i + 1, time: i + 7, status: 0 }))
        },
        {
          id: 3,
          roomName: '5楼西会议室',
          things: ['电视机', '话筒', '电子横幅屏', 'LED显示屏'],
          place: '供水业大厦2楼西',
          time: Array.from({ length: 16 }, (_, i) => ({ id: i + 1, time: i + 7, status: i + 7 >8 &&  i + 7 < 16 ? 1 : 0 }))
        }
      ]
    }
  },
  methods: {
    onClickBack() {
      this.$router.push('/meetingOverview')
    },
    handleGoPage() {
      this.$router.push({
        path: '/meetingOverview/meetingSet'
      })
    },
    onConfirm(value) {
      this.currentDate = value;
      this.formData.time = this.$dayjs(value).format('YYYY-MM-DD')
      this.showDate = false
    }
  }
}
</script>
<style scoped lang="less">
.selectMeetingRoom {
  background: linear-gradient(115deg, #F7FAFF 0%, #B8D3FA 85%, #DCE9FD 100%);
  backdrop-filter: blur(0px);

  .content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(180deg, #BEE3FB 0%, #F5F8FE 100%);
    border-radius: 10px;
    padding: 10px 10px 0px 10px;

    .chooseRoom {
      display: flex;
      justify-content: space-between;
      align-items: center;


      .chooseRoom-title {
        font-weight: 600;
        font-size: 16px;
        color: #01124D;
      }

      .chooseRoom-filter {
        display: flex;
        align-items: center;
        color: rgba(1, 18, 77, 0.62);
        font-weight: 600;
        font-size: 14px;
      }
    }
    .chooseDate {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .chooseDate-text {
        display: flex;
        align-items: center;
        justify-content: center;
      }
            
    }

  }

  .card {
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    color: #01124D;
    box-shadow: 0px 0px 13px 0px rgba(150, 180, 255, 0.33);
    overflow: hidden;

    .card-title {
      display: flex;
      justify-content: space-between;

      .card-title-text {
        font-weight: 600;
        font-size: 16px;
        color: #01124D;
      }

      .card-person {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 13px;
        border-radius: 60px 0 0 60px;
        background-color: rgba(2, 185, 149, 0.15);
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #02B995;
        padding: 0 15px;
        transform: translateX(15px)
      }
    }

    .card-things {
      display: flex;
      gap: 5px;

      .things {
        padding: 0 5px;
        background: #EDF4FF;
        border-radius: 6px;
        font-weight: 400;
        font-size: 13px;
        color: #01124D;
      }
    }
    .card-place {
      display: flex;
      align-items: center;
      gap: 5px;
      .place {
        font-weight: 400;
        font-size: 13px;
        color: rgba(1, 18, 77, 0.67);
      }
    }
     .card-time{
      display: flex;
      flex-wrap: nowrap;
      gap: 2px;
      .roomTime{
        width: 15px;
        height: 8px;
        margin-bottom: 5px;
      }
      .roomTime2{
        font-size: 12px;
        font-weight: 100
      }
     }

  }

  .card-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;

    .container {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  }
}
</style>
